<script setup lang="ts">
const lang: any = getCurrentPageLang('system')
const systemStore = useSystemStore()
const userStore = useUserStore()
const route = useRoute()

// 定义 tabBar 项目的类型
interface TabBarItem {
  id: number
  defaultImg: string
  activeImg: string
  title: string
  routeName: string
  needLogin: boolean
  tip: boolean
}

const hasGift = ref(true)
const tabBarList = ref<TabBarItem[]>([])

const showTabBar = computed(() => systemStore.tabbarRouteNames.includes(route.name as string))

// 同时调用本页面需要用到的所有接口
async function initData() {
  initTabBarList()
}

initData()

function initTabBarList() {
  tabBarList.value = [
    {
      id: 1,
      defaultImg: '/images/tabBar/tableBar_1.png',
      activeImg: '/images/tabBar/tableBar_1s.png',
      title: lang.lnicio_title,
      routeName: 'home',
      needLogin: false,
      tip: false,
    },
    {
      id: 2,
      defaultImg: '/images/tabBar/tableBar_2-2.png',
      activeImg: '/images/tabBar/tableBar_2s-2.png',
      title: lang.ranking_title,
      routeName: 'ranking-ranking',
      needLogin: true,
      tip: true,
    },
    {
      id: 3,
      defaultImg: '/images/tabBar/tableBar_3.png',
      activeImg: '/images/tabBar/tableBar_3.png',
      title: lang.carteira_title,
      routeName: '',
      needLogin: true,
      tip: false,
    },
    {
      id: 4,
      defaultImg: '/images/tabBar/tableBar_4.png',
      activeImg: '/images/tabBar/tableBar_4s.png',
      title: lang.bonus_title,
      routeName: 'bonus',
      needLogin: false,
      tip: false,
    },
    {
      id: 5,
      defaultImg: '/images/tabBar/tableBar_5.png',
      activeImg: '/images/tabBar/tableBar_5s.png',
      title: lang.cona_title,
      routeName: '',
      needLogin: true,
      tip: false,
    },
  ]
}

const activeTab = ref()

function initActiveTab() {
  activeTab.value
    = tabBarList.value.find(item => item.routeName === route.name)?.id || 1
}
onMounted(() => {
  initActiveTab()
})
onActivated(() => {
  initActiveTab()
})

watch(
  () => userStore.showCarteira,
  (val) => {
    if (val) {
      activeTab.value = 3
    } else {
      initActiveTab()
    }
  },
)
watch(
  () => userStore.showUser,
  (val) => {
    if (val) {
      activeTab.value = 5
    } else {
      initActiveTab()
    }
  },
)
watch(
  () => route.name,
  () => {
    initActiveTab()
  },
)

function linkTo(item: TabBarItem) {
  if (item.needLogin && !userStore.isLogin) {
    return userStore.changeShowLogin(true)
  }
  if (item.id === 3) {
    if (userStore.showCarteira) {
      closeAllDialog()
    } else {
      closeAllDialog()
      userStore.changeShowCarteira(true)
    }
  } else if (item.id === 5) {
    if (userStore.showUser) {
      closeAllDialog()
    } else {
      closeAllDialog()
      userStore.changeShowUser(true)
    }
  } else {
    closeAllDialog()
    navigateTo({ name: item.routeName })
    nextTick(() => {
      activeTab.value = item.id
    })
  }
}

function closeAllDialog() {
  userStore.changeShowCarteira(false)
  userStore.changeShowUser(false)
}
</script>

<template>
  <div v-if="showTabBar" v-hide-on-keyboard class="tablebar">
    <div class="tablebar_box">
      <div
        v-for="item in tabBarList"
        :key="item.id"
        class="item"
        :class="{ checked: activeTab === item.id }"
        @click="linkTo(item)"
      >
        <!-- 小红点 -->
        <div v-if="item.tip" class="ranking_tips" />

        <div :class="{ brz7: item.id === 3 }">
          <NuxtImg
            :src="activeTab === item.id ? item.activeImg : item.defaultImg"
            :alt="item.title"
          />
        </div>
        <p>{{ item.title }}</p>
      </div>
      <NuxtImg
        v-if="hasGift"
        src="/images/tabBar/tableBar_bonus.png"
        class="tableBar_bonus"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tablebar {
  width: 100%;
  z-index: 104;
  display: flex;
  align-items: flex-end;
  --9982cf86: url(/images/tabBar/tableBar_bg.png);
  position: fixed;
  bottom: 0;
  max-width: var(--max-client-width);
  left: 50%;
  transform: translateX(-50%);
}
.tablebar .tablebar_box {
  height: 1.46rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: var(--9982cf86);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 -0.03rem 0.08rem #00000040;
  position: relative;
}
.tablebar .item {
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}
.tablebar .tablebar_box * {
  transition: all 0.2s ease-in-out;
}
.tablebar .item div {
  width: 0.9rem;
  transform: translateY(-0.04rem);
}
.tablebar .item div img {
  position: relative;
  z-index: 2;
  width: 100%;
}
.tablebar .checked {
  opacity: 1;
  position: relative;
}
.tablebar .item p {
  position: relative;
  z-index: 2;
  font-size: 0.3rem;
  color: #d0b2c2;
}
.tablebar .checked p {
  color: #ffda2f;
}
.tablebar .tablebar_box .tableBar_bonus {
  position: absolute;
  top: -0.28rem;
  right: 2.32rem;
  width: 0.54rem;
}
.tablebar .item:nth-child(3) .brz7,
.tablebar .item:nth-child(3) .ac {
  top: -0.7rem;
  width: 2rem;
  position: absolute;
}
.tablebar .item:nth-child(3) p {
  margin-top: 1rem;
}
.tablebar .ranking_tips {
  position: relative;
}
@keyframes bounce-08dbc71c {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.tablebar .ranking_tips:after {
  content: '';
  width: 0.2rem;
  height: 0.2rem;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: 22;
  top: 0rem;
  right: -0.1rem;
  animation: bounce-08dbc71c 0.6s ease-in-out infinite;
}
</style>
